   window.onload = function(){
            // 数据渲染
            const id = location.search.split('=')[1];
            const proData = data;
            let i = 0;
            proData.some((val,idx)=>{
                
                i=idx;
                return val.proId === id;
            })
            var simg = document.querySelector('.smallImg');
            simg.innerHTML = ` <img src="${proData[i].proImg} width="430" height="430" alt="chothes"" /><div id="shadow">
            <table border="1px" width="100px" height="100px"><tr><td class="td_top td_left"></td><td class="td_top"></td><td class="td_top"></td><td class="td_top"></td><td class="td_top"></td><td class="td_top"></td><td class="td_top"></td><td class="td_top"></td><td class="td_top"></td><td class="td_top"></td><td class="td_top"></td><td class="td_top"></td><td class="td_top"></td><td class="td_top"></td><td class="td_top"></td><td class="td_top"></td><td class="td_top"></td><td class="td_top"></td><td class="td_top"></td><td class="td_top td_right"></td></tr><tr><td class="td_left"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="td_right"></td></tr><tr><td class="td_left"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="td_right"></td></tr><tr><td class="td_left"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="td_right"></td></tr><tr><td class="td_left"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="td_right"></td></tr><tr><td class="td_left"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="td_right"></td></tr><tr><td class="td_left"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="td_right"></td></tr><tr><td class="td_left"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="td_right"></td></tr><tr><td class="td_left"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="td_right"></td></tr><tr><td class="td_left"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="td_right"></td></tr><tr><td class="td_left"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="td_right"></td></tr><tr><td class="td_left"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="td_right"></td></tr><tr><td class="td_left"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="td_right"></td></tr><tr><td class="td_left"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="td_right"></td></tr><tr><td class="td_left"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="td_right"></td></tr><tr><td class="td_left"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="td_right"></td></tr><tr><td class="td_left"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="td_right"></td></tr><tr><td class="td_left"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="td_right"></td></tr><tr><td class="td_left"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="td_right"></td></tr><tr><td class="td_left"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="td_right"></td></tr><tr><td class="td_left td_bottom"></td><td class="td_bottom"></td><td class="td_bottom"></td><td class="td_bottom"></td><td class="td_bottom"></td><td class="td_bottom"></td><td class="td_bottom"></td><td class="td_bottom"></td><td class="td_bottom"></td><td class="td_bottom"></td><td class="td_bottom"></td><td class="td_bottom"></td><td class="td_bottom"></td><td class="td_bottom"></td><td class="td_bottom"></td><td class="td_bottom"></td><td class="td_bottom"></td><td class="td_bottom"></td><td class="td_bottom"></td><td class="td_right td_bottom"></td></tr></table>
        </div>`;
            
            var bimg = document.querySelector('.bigImg');
            bimg.innerHTML=`<img src="${proData[i].proImg}" width="800" height="800" alt="chothes" />`;

            var r1 = document.querySelector('#div_box-right-1')
            r1.innerHTML=`<span id="div_box-right-1-span_1">${proData[i].proName}</span>
            <span id="div_box-right-1-span_2">收藏加购，闪电发货！</span>`;

            var r2 = document.querySelector('#div_box-right-2');
            r2.innerHTML = `<span id="div_box-right-2-span_1">价格</span>
            <span id="div_box-right-2-span_2"><span style="font-weight: 200;">￥</span>${proData[i].price}</span>`;

            var r3 = document.querySelector('#div_box-right-6');
            r3.innerHTML=`<span>颜色</span>
            <div id="div_box-right-6-div-1"><img src="${proData[i].proImg}" width="38px" height="38px" /></div>
            <div id="div_box-right-6-div-2"><img src="${proData[i].proImg1}" width="38px" height="38px" /></div>
            <div id="div_box-right-6-div-3"><img src="${proData[i].proImg2}" width="38px" height="38px" /></div>
            <div id="div_box-right-6-div-4"><img src="${proData[i].proImg3}" width="38px" height="38px" /></div>`;

            var r4 = document.querySelector('#div_box-bottom-left');
            r4.innerHTML=` <div id="div_box-bottom-left-div-1"><img src="${proData[i].proImg}" width="55px" height="55px" /></div>
            <div id="div_box-bottom-left-div-2"><img src="${proData[i].proImg1}" width="55px" height="55px" /></div>
            <div id="div_box-bottom-left-div-3"><img src="${proData[i].proImg2}" width="55px" height="55px" /></div>
            <div id="div_box-bottom-left-div-4"><img src="${proData[i].proImg3}" width="55px" height="55px" /></div>
            
            <div id="div_box-bottom-left-mid">
                <div id="div_box-bottom-left-mid-div-1">
                    <svg t="1588667969983" style="width:0.8em;height: 0.8em;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8167" width="200" height="200"><path d="M869.76 425.088c-6.272-17.664-22.272-30.464-41.6-33.28l-187.648-27.264-81.536-165.632c-8.576-17.408-27.008-28.544-47.232-28.544-20.224 0-38.528 11.136-47.104 28.544l-81.536 165.632-187.776 27.264c-19.2 2.816-35.328 15.744-41.472 33.28-6.144 17.664-1.536 37.12 12.16 50.304l137.344 134.4L271.488 796.16c-3.2 18.816 5.12 37.632 21.376 48.512 8.96 6.016 19.456 9.088 29.952 9.088 8.704 0 17.28-2.048 25.216-6.144l163.712-86.144 163.712 86.144c7.808 4.096 16.384 6.144 25.216 6.144 10.752 0 21.12-3.2 30.08-9.088 16.256-11.008 24.576-29.824 21.376-48.512l-31.872-186.368L857.6 475.52c13.696-13.312 18.304-32.768 12.16-50.432zM682.752 575.104" p-id="8168" fill="#cdcdcd"></path></svg>
                    <span style="cursor: pointer;">收藏商品</span>&nbsp;&nbsp;(319人气)
                </div>
                <div id="div_box-bottom-left-mid-div-2"><a href="">举报<a></div>`;
            // 数据渲染end

            // 放大镜
            var wrap    = document.getElementsByClassName("wrap")[0];
            var smallImgBox = wrap.getElementsByClassName("imgBox")[0];
            var smallImg = smallImgBox.getElementsByTagName("img")[0];
            var bigImgBox = wrap.getElementsByClassName("imgBox")[1];
            var bigImg = bigImgBox.getElementsByTagName("img")[0];
            var shadow = document.getElementById("shadow")
 
            smallImgBox.onmouseover = function () {
                shadow.style.display="block";
                bigImgBox.style.display="block";
            };
            smallImgBox.onmouseout = function () {
                shadow.style.display="none";
                bigImgBox.style.display="none";
            }
 
 
            smallImgBox.onmousemove = function (ev) {
 
                var ev = ev || window.event ;
 
                //鼠标在指定div里面的坐标:可视区里面鼠标坐标- div到文档边界的距离
              /*  var x =  ev.clientX  -   shadow.offsetParent.offsetLeft -shadow.offsetParent.offsetParent.offsetLeft   ;
                var y = ev.clientY  -    shadow.offsetParent.offsetTop  -shadow.offsetParent.offsetParent.offsetLeft;*/
                var x =  ev.clientX  -   smallImgBox.offsetLeft - wrap.offsetLeft   ;
                var y = ev.clientY  -    smallImgBox.offsetTop  -wrap.offsetTop;
 
 
                var l = x-shadow.offsetWidth/2 ;
                var t = y -shadow.offsetHeight/2 ;
 
                if( l <=0 ) { l=0; }
                else if(  l >=smallImgBox.offsetWidth - shadow.offsetWidth ){
                    l = smallImgBox.offsetWidth - shadow.offsetWidth ;
                }
                if(  t <=0 ){  t=0; }
                else if(  t>=smallImgBox.offsetHeight - shadow.offsetHeight )  {
                    t=smallImgBox.offsetHeight - shadow.offsetHeight;
                }
                shadow.style.left= l +"px";
                shadow.style.top= t +"px";
 
              /*  var  radioX = l /   (smallImgBox.offsetWidth - shadow.offsetWidth);
                var  radioY = t /  (smallImgBox.offsetHeight - shadow.offsetHeight) ;
                document.title =radioX+" "+ radioY ;
                bigImg.style.left=-radioX*(bigImg.width - bigImgBox.offsetWidth) +"px";
                bigImg.style.top=-radioY*(bigImg.height - bigImgBox.offsetHeight) +"px";*/
 
                 var  radioX = x /  (smallImgBox.offsetWidth - shadow.offsetWidth)  >=1? 1 : x /   (smallImgBox.offsetWidth - shadow.offsetWidth) ;
                 var  radioY = y /  (smallImgBox.offsetHeight - shadow.offsetHeight) >=1? 1 :  y /  (smallImgBox.offsetHeight - shadow.offsetHeight);
                
                 bigImg.style.left=-radioX*(bigImg.width - bigImgBox.offsetWidth) +"px";
                 bigImg.style.top=-radioY*(bigImg.height - bigImgBox.offsetHeight) +"px";
 
                 // 放大镜end
            };
             //颜色选择
        var yse1=document.getElementById("div_box-right-6-div-1");
        var yse2=document.getElementById("div_box-right-6-div-2");	
        var yse3=document.getElementById("div_box-right-6-div-3");	
        var yse4=document.getElementById("div_box-right-6-div-4");
       yse1.onclick=function(){
           yse1.style.border="2px solid #ff0036";
           yse2.style.border="0.2px solid #e5e4e4";
           yse3.style.border="0.2px solid #e5e4e4";
           yse4.style.border="0.2px solid #e5e4e4";
           
           smallImg.src=proData[i].proImg;
           bigImg.src=proData[i].proImg;
       }
         yse2.onclick=function(){
           yse2.style.border="2px solid #ff0036";
           yse1.style.border="0.2px solid #e5e4e4";
           yse3.style.border="0.2px solid #e5e4e4";
           yse4.style.border="0.2px solid #e5e4e4";
           
           smallImg.src=proData[i].proImg1;
           bigImg.src=proData[i].proImg1;
       }
         yse3.onclick=function(){
           yse3.style.border="2px solid #ff0036";
           yse1.style.border="0.2px solid #e5e4e4";
           yse2.style.border="0.2px solid #e5e4e4";
           yse4.style.border="0.2px solid #e5e4e4";
           
           smallImg.src=proData[i].proImg2;
           bigImg.src=proData[i].proImg2;
       }
           yse4.onclick=function(){
           yse4.style.border="2px solid #ff0036";
           yse1.style.border="0.2px solid #e5e4e4";
           yse2.style.border="0.2px solid #e5e4e4";
           yse3.style.border="0.2px solid #e5e4e4";
           
           smallImg.src=proData[i].proImg3;
           bigImg.src=proData[i].proImg3;
       }
       //颜色选择end

       //内存选择
       var div1=document.getElementById("div_box-bottom-left-div-1");
       var div2=document.getElementById("div_box-bottom-left-div-2");
       var div3=document.getElementById("div_box-bottom-left-div-3");
       var div4=document.getElementById("div_box-bottom-left-div-4");
       div1.onmouseover=function(){
           div1.style.border="2px solid #000";
           div2.style.border="1px solid #fff";
           div3.style.border="1px solid #fff";
           div4.style.border="1px solid #fff";
           
           smallImg.src=proData[i].proImg;
           bigImg.src=proData[i].proImg;
       }
       div2.onmouseover=function(){
           div2.style.border="2px solid #000";
           div1.style.border="1px solid #fff";
           div3.style.border="1px solid #fff";
           div4.style.border="1px solid #fff";
           
           smallImg.src=proData[i].proImg1;
           bigImg.src=proData[i].proImg1;
       }
       div3.onmouseover=function(){
           div3.style.border="2px solid #000";
           div1.style.border="1px solid #fff";
           div2.style.border="1px solid #fff";
           div4.style.border="1px solid #fff";
           
           smallImg.src=proData[i].proImg2;
           bigImg.src=proData[i].proImg2;
       }
       div4.onmouseover=function(){
           div4.style.border="2px solid #000";
           div1.style.border="1px solid #fff";
           div2.style.border="1px solid #fff";
           div3.style.border="1px solid #fff";
           
           smallImg.src=proData[i].proImg3;
           bigImg.src=proData[i].proImg3;
       }
       
       //内存选择end

       //size
       var cima1=document.getElementById("div_box-right-5-div-1");
       var cima2=document.getElementById("div_box-right-5-div-2");
       var cima3=document.getElementById("div_box-right-5-div-3");
       var cima4=document.getElementById("div_box-right-5-div-4");
       
       cima1.onclick=function(){
           cima1.style.border="2px solid #ff0036";
           cima2.style.border="0.2px solid #e5e4e4";
           cima3.style.border="0.2px solid #e5e4e4";
           cima4.style.border="0.2px solid #e5e4e4";
           
       }
       cima2.onclick=function(){
           cima2.style.border="2px solid #ff0036";
           cima1.style.border="0.2px solid #e5e4e4";
           cima3.style.border="0.2px solid #e5e4e4";
           cima4.style.border="0.2px solid #e5e4e4";
           
       }
       cima3.onclick=function(){
           cima3.style.border="2px solid #ff0036";
           cima1.style.border="0.2px solid #e5e4e4";
           cima2.style.border="0.2px solid #e5e4e4";
           cima4.style.border="0.2px solid #e5e4e4";
           
       }
       cima4.onclick=function(){
           cima4.style.border="2px solid #ff0036";
           cima1.style.border="0.2px solid #e5e4e4";
           cima2.style.border="0.2px solid #e5e4e4";
           cima3.style.border="0.2px solid #e5e4e4";
           
       }
       //size end

       //计数
       var x=1;
		var divnum=document.getElementById("div_box-right-7-div-1");
		var divadd=document.getElementById("div_box-right-7-div-2-onck1");
		var divdelete=document.getElementById("div_box-right-7-div-2-onck2");
		
		divadd.onclick=function(){
			x++;
			divnum.innerText=x;
		}
		divdelete.onclick=function(){
			x--;
			if(x<2){
				x=1;
			}
			divnum.innerText=x;
		}
       //计数end
       var userMsg = localStorage.getItem('userMsg')?JSON.parse(localStorage.getItem('userMsg')):{};
        if(userMsg.isLogin ==='ok'){
            $("#log").hide();
            $("#log1").show();
            $("#log1").find('span').html(userMsg.username);
        }
        $("#quit").click(function(){
            localStorage.setItem("userMsg","");
            location.reload();
        })


        //加入购物车
        //let goodsArr=[];
        // console.log(goodsArr);
        $('.add').click(function(){
            console.log(id);
            console.log(proData[i].price);
                        
           
            const arr = localStorage.getItem("proData") ? JSON.parse(localStorage.getItem("proData")) : [];

            if(arr.length > 0){
                // 不是第一次，判断商品新旧
                let i = 0;
                const onoff = arr.some((val,idx)=>{
                    i = idx;
                    // 当some的回调函数返回true时，立即结束，并返回true
                    return val.id === id
                })
                if(onoff){
                    // 找到了，旧，修改数量
                    arr[i].num++
                }else{
                    // 没有找到，新，直接加
                    arr.push({
                        id:id,
                        num:1,
                        flag:true,
                        price:proData[i].price
                    })
                }
            }else{
                // 第一次加入购物车，直接加
                arr.push({
                    id:id,
                    num:1,
                    flag:true,
                    price:proData[i].price
                })
            }
            localStorage.setItem("proData", JSON.stringify(arr))
        })


        };

        $('.add1').click(function(){
            location.href='../list.html';
        })
       